/*
* 功能: 实现元素动画控制 backEaseout easeOut Linear
* 函数名: tweenAnimation
* 参数: ele   元素对象
*      style    样式 字符串
*      init     起始状态
*      end      结束状态
*      time     过渡时间
*      jiange       动画间隔时间
*      type     动画类型 字符串
* 使用示例: tweenAnimation(ele,'width',200,1000,5000,10,'backEaseOut')
*
*       function backEaseOut(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        }
*       function easeOut(t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        }
*       function Linear(t,b,c,d){ return c*t/d + b; }
*
* 如: 2s 内元素的 top 值从 200 过渡到 9000 , 每次动画时间间隔为 10 , easeOut
*       tweenAnimation(ele,'top',200,9000,2000,10,'easeOut')
* 依赖: transformCSS.js
* */
function tweenAnimation(ele,style,init,end,time,jiange,type){
    //定义 tween 函数
    var tween = {
        backEaseOut: function (t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeOut: function (t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        Linear: function (t,b,c,d){
            return c*t/d + b;
        }
    }

    //type 参数初始化
    var type = type === undefined ? 'Linear' : type;

    // tween 函数参数初始化 t b c d
    var t = 0;  //开始时间
    var b = init;   //起始样式
    var c = end-init;    //样式变化量
    var d = time;   //动画过渡总时间

    /*
    * 定时器冲突问题:
    *       setIntervar() 函数的返回结果是一个作为当前定时器标识的数字
    *       当多次调用定时器时 , 会覆盖之前创建的定时器的标识
    *       导致前面的定时器无法被清除
    * 解决: 将所有定时器标识保存到对象的样式仓库中 , 用样式名来标识当前定时器
    * */
    //为对象添加 timer 属性 , 是一个对象 , 用于保存元素的所有定时器标识
    if(ele.timer === undefined){
        ele.timer = {};
    }
    //设置定时器 , 通过样式标识对应定时器
    ele.timer[style] = setInterval(function(){
        //4. 当时间 t 达到结束时间 time 时,关闭定时器
        /*
        * 注意:  第四步应该写到最前面
        *       应该在 t 自增之前判断是否已经到达结束时间 , 然后根据判断结果决定是否执行后面的代码
        *       使代码更加严谨
        * */
        if(t >= d){
            clearInterval(ele.timer[style]);
            return;
        }
        //1. 时间自增
        t += jiange;
        //2. 每一个间隔时间后 , 计算时间 t 时的新的样式值
        var v = tween[type](t,b,c,d);
        //3. 为元素对象设置新的样式
        switch (style){
            //根据样式判断该是否有单位 有单位 px / 没有单位
            case 'width':
            case 'height':
            case 'left':
            case 'top':
                ele.style[style] = v +'px';
                break;
            case 'translateX':
            case 'translateY':
            case 'translateZ':
            case 'scale':
            case 'scaleX':
            case 'scaleY':
            case 'scaleZ':
            case 'rotate':
            case 'rotateX':
            case 'rotateY':
                transformCSS(ele,style,v);
                break;
            case 'opcity':
                ele.style[style] = v;
        }

    },jiange);
}